<%--
  Created by IntelliJ IDEA.
  User: 86182
  Date: 2022/9/5
  Time: 9:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common.jsp" %>
<html>
<head>
    <title>Title</title>
    <%--引入 echarts.js--%>
    <script src="${pageContext.request.contextPath}/static/echarts/echarts.js"></script>
</head>
<%--侧边操作框--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="sel">查看结果</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger"  lay-event="delete">删除</a>
</script>
<%--顶部操作框--%>
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-reduce-circle" style="font-size: 20px;"></i>删除</a>
</script>
<%--条件查询表--%>
<form class="layui-form" id="haha" action="" style="margin-top: 10px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="conditionalQuery"><i class="layui-icon layui-icon-search"
                                                                                  style="font-size: 20px;"></i>查询
            </button>
            <button type="test" class="layui-btn layui-btn-primary" id="reset">重置</button>
        </div>
    </div>
</form>
<body>
<style>
    #show {
        margin: auto;
        background: pink;
        font-family: 叶根友毛笔行书简体;
        font-size: 30px;
    }

    #bb {
        width: 200px;
        height: 80px;
        margin: auto;
        line-height: 80px;
    }

    #result {
        width: 400px;
        height: 80px;
        margin: auto;
        line-height: 80px;

    }
</style>
<%--饼图--%>
<div id="show" style="width: 100%;height: 100%; display: none;">
    <div >
        <h1 style="text-align:center;line-height: 60px;font-size: 30px;font-weight: 600;color: #7a2114;">测评报告预览</h1>
    </div>
    <div id="div1" style="background: rgba(87,144,255,.2);padding: 20px;text-align: center;margin-bottom: 20px"></div>
    <div style="width: 100%;height: 350px;" id="shopping"></div>
    <div style="background: rgba(87,144,255,.2);padding: 20px;margin-top: 20px;text-align: center"
         id="div2">
    </div>
    <div style="background: white;padding: 20px;margin-top: 20px; text-align: center" id="div3"></div>
</div>
<table id="demo" lay-filter="test"></table>
</body>
<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
<script src="/static/build/layui.js"></script>
    <script>
        layui.config({
            version: 1,
            base: 'echarts/'
        }).use(['table','form','echarts','jquery','laydate'], function() {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.jquery;
            echarts = layui.echarts;
            /**
             * 主页面展示数据
             */
            table.render({
                elem: '#demo'
                ,height:600
                ,url: '${pageContext.request.contextPath}/viewTestResultFpa/viewTestResultFpaAll.do' //数据接口
                ,page: true //开启分页
                ,limit:10
                ,limits:[10,20,30,40,50,60,70]
                ,toolbar: '#barDemo1'
                ,cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}
                    , {field: 'name', title: '姓名', width: 100},
                    , {field: 'phone', title: '手机号', width: 115}
                    , {field: 'createTime', title: '测试时间', width: 180, sort: true}
                    , {field: 'redCount', title: '红色得分', width: 100,}
                    , {field: 'blueCount', title: '蓝色得分', width: 100}
                    , {field: 'yellowCount', title: '黄色得分', width: 100, sort: true}
                    , {field: 'greenCount', title: '绿色得分', width: 100}
                    , {field: 'testPlanId', title: '测试计划ID', width: 100, sort: true}
                    , {fixed: 'right', title: '操作', width: 240, align: 'center', toolbar: '#barDemo'}
                ]]
            });
            // 条件查询
            form.on('submit(conditionalQuery)', function(data){
                console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                table.reload('demo', {
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        phone: data.field.phone //排序字段
                        ,name:data.field.name//排序方式
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            })
            //重置条件查询表单，刷新table数据
            $("#reset").click(function () {
                myTable.reload({
                    where: { //设定异步数据接口的额外参数，任意设
                        phone: ""
                        , name: ""
                    }
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            })
            // 多行删除
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id)
                    ,data = checkStatus.data; //获取选中的数据
                switch(obj.event) {
                    case 'del':
                        if(data.length === 0){
                            layer.msg('请选择一行');
                        }else {
                            var ids = [];
                            for(let i = 0 ; i < data.length;i++) {
                                ids[i] =data[i].id;
                            }
                            layer.confirm('确认删除吗', function (index) {
                                $.ajax({
                                    url: "${pageContext.request.contextPath}/viewTestResultFpa/delviewTestResultFpa.do",
                                    type: "POST",
                                    dataType: "JSON",
                                    data: {id: ids.join(",")},
                                    success: function (data) {
                                        if (data.code == 0) {
                                            layer.closeAll();
                                            table.reload('demo');
                                        }
                                        layer.msg(data.msg);
                                    }
                                });
                            })
                        }
                        break;
                }
            })
            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                console.log(data)
                if(layEvent == 'delete'){
                    layer.confirm('真的删除行么', function (index) {
                        //去后台批量删除数据
                        $.ajax({
                            url: "${pageContext.request.contextPath}/viewTestResultFpa/delviewTestResultFpa.do",
                            type: "POST",
                            dataType: "JSON",
                            data: {id: data.id},
                            success: function (data) {
                                if (data.code == 0) {
                                    //关闭对话框
                                    layer.closeAll(); //疯狂模式，关闭所有层
                                    //刷新表格数据
                                    table.reload('demo');

                                }
                                layer.msg(data.msg);
                            }

                        });
                    });
                }else if( layEvent == 'sel'){
                    layer.open({
                        title: '性格测试结果图示',
                        type: 1,
                        content: $('#show'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        area: ['450px', '700px']
                    });
        $.ajax({
            url: "${pageContext.request.contextPath}/viewStatistics/queryResultById.do",
            type: "POST",
            dataType: "JSON",
            data: {testerId: obj.data.testerId},
            success: function (ret) {
                    var red = data.redCount
                    var blue = data.blueCount
                    var yellow = data.yellowCount
                    var green = data.greenCount
                    var myChart = echarts.init(document.getElementById('shopping'));
                    var option;
                    option = {
                        title: {
                            text: 'FPA性格测试',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Fpa性格占比',
                                type: 'pie',
                                radius: '70%',
                                data: [
                                    {value: red, itemStyle: {color: '#c51313'}, name: "红色性格"},
                                    {value: blue, itemStyle: {color: '#131cc5'}, name: '蓝色性格'},
                                    {value: yellow, itemStyle: {color: '#b9c513'}, name: '黄色性格'},
                                    {value: green, itemStyle: {color: '#13c57b'}, name: '绿色性格'},
                                ],
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    var a = [blue, red, yellow, green];
                    function f(a, b) {  //排序函数
                        return (a - b);  //返回比较参数
                    }
                    a = a.sort(f)
                    if (a[a.length - 1] == yellow) {
                        color = 1
                    } else if (a[a.length - 1] == red) {
                        color = 2
                    } else if (a[a.length - 1] == blue) {
                        color = 3
                    } else {
                        color = 4
                    }
                    $.ajax({
                        url: "${pageContext.request.contextPath}/viewStatistics/div.do",
                        type: "POST",
                        dataType: "JSON",
                        data: {id: color},
                        success: function (ret) {
                            $('#div1').html(ret.data.data[0].div1)
                            $('#div2').html(ret.data.data[0].div2)
                            $('#div3').html(ret.data.data[0].div3)
                        }
                    });

                }

                })
                }
            })
        });
    </script>
</body>
</html>
